<template>
  <div class="driver">
    <div class="driver-msg">
      <div class="driver-content">
        <div class="driverImgUrl"></div>
        <div class="driver-info">
          <p>刘师傅</p>
          <p class="carType"><span>冀A***24</span><span>小型面包</span></p>
        </div>
      </div>
      <div class="driver-state">等待接单</div>
    </div>
    <div class="location">
      <span class="locationIcon"></span>
      <div class="locationMsg"><span>12秒</span>前定位：<span>西安</span> 离我<span>7.4</span>公里</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'myDriver'
  }
</script>

<style scoped>
  .driver{
    width: 710rpx;
    height: 222rpx;
    box-shadow: 0rpx 5rpx 8rpx #eee;
    border: 2rpx solid #eeeeee;
    border-radius: 15rpx;
    margin: 18rpx auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .driver-state{
    font-size: 24rpx;
    color: #bfbfbf;
  }
  .driver-msg{
    width: 652rpx;
    height: 90rpx;
    margin: 30rpx auto 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .driver-content{
    width: 328rpx;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
  }
  .driverImgUrl{
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    background-color: #333;
  }
  .driver-info{
    width: 212rpx;
    height: 90rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .carType{
    font-size: 22rpx;
    color: #bfbfbf;
  }
  .carType span{
    margin: 0 5rpx;
  }
  .location{
    display: flex;
    padding-left:144rpx;
    margin-top: 40rpx;
    justify-items: center;
  }
  .locationIcon{
    width: 30rpx;
    height: 42rpx;
    background: url("~static/img/dw.png") no-repeat center/cover;
    display: inline-block;
    margin-right: 10rpx;
  }
  .locationMsg{
    font-size: 22rpx;
    color: #bfbfbf;
    line-height: 42rpx;
  }
</style>
